import {Component, Hook, Mut, VueComponent,Link} from 'vue3-oop'
import {NCard, NForm, NFormItem, NInput, NSpace, NButton, NIcon, NUpload} from 'naive-ui'
import styles from './signin.module.scss'
import SigninApi from "./signin.api";

@Component()
export default class SigninView extends VueComponent {
  constructor() {
    super()
  }

  @Mut() state = {
    formValue: {
      loading: false,
      username: "",
      password: ""
    }
  }


  handleSignIn=(e:MouseEvent)=>{
    e.stopPropagation();
    this.state.formValue.loading = true;
    window.$loadingBar.start();
    const {username,password} = this.state.formValue
    SigninApi.signIn({username,password}).then(({data})=>{
      const { token } = data;
      localStorage.setItem("token",token);
      window.$router.push("/main")
    }).catch((reason => {
      console.log(reason.response);
    })).finally(()=>{
      this.state.formValue.loading = false;
      window.$loadingBar.finish();
    })
  }

  @Hook('Mounted')
  onMounted(){
  }

  render() {
    return (
      <div
        class={[styles['signin']]}
      >
        <NCard
          class={[styles['form']]}
          title={"登录流程中心"}
        >
          <NForm

          >
            <NFormItem label={"账号"}>
              <NInput
                value={this.state.formValue.username}
                onUpdateValue={(value)=>{this.state.formValue.username=value}}
              />
            </NFormItem>
            <NFormItem label={"密码"}>
              <NInput
                type="password"
                value={this.state.formValue.password}
                onUpdateValue={(value)=>{this.state.formValue.password=value}}
                inputProps={{
                  autocomplete: "on"
                }}
              />
            </NFormItem>
            <NSpace>
              <NButton onClick={this.handleSignIn} loading={this.state.formValue.loading}>登录</NButton>
            </NSpace>
          </NForm>
        </NCard>
      </div>
    )
  }
}
